<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/tailwind.min.css">
    <link rel="stylesheet" href="./lib/introjs.css">
    <script src="./lib/intro.js"></script>

    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@4.1.0/introjs.css">
    <script src="https://cdn.jsdelivr.net/npm/intro.js@4.1.0/intro.js"></script> -->

    <style>
        /* 用户引导 start */
        .introjs-helperLayer.introjs-fixedTooltip {
            filter: sepia(-4%) opacity(42%);
            background-color: rgb(170 211 235 / 38%);
            box-shadow: rgb(33 33 33 / 80%) 0px 0px 0px 0px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px !important;
        }

        .introjs-tooltip-title,
        .introjs-skipbutton {
            font-size: 15px;
        }

        .introjs-tooltiptext {
            font-size: 14px;
            padding: 5px 20px;
        }

        .introjs-tooltipbuttons {
            padding: 5px 10px;
            display: flex;
            justify-content: flex-end;
        }

        .introjs-tooltipbuttons .introjs-button {
            font-size: 10px;
            padding: 4px 10px;
            border: none;
            background-color: #a3ccedc7;
            color: white;
            box-shadow: none;
            margin-left: 10px;
            display: inline-flex;
            clear: both;
        }

        .introjs-tooltipbuttons a:focus,
        .introjs-tooltipbuttons a:hover,
        .introjs-tooltipbuttons a:active {
            background-color: #2196f3;
            color: white;
            border: none;
        }

        .introjs-tooltipbuttons .introjs-hidden {
            display: none;
        }

        /* 用户引导 start */
    </style>
</head>

<body>
    <a href="https://introjs.com/docs/hints/api">官网</a>

    <div class=" container mx-auto bg-green-200 flex justify-start items-center flex-wrap m-5">
        <!-- <div class="w-28 max-w-16 h-28  flex justify-center items-center bg-blue-400 m-5">
            <div data-intro='hello world!' data-title="说明">hello world</div>
        </div> -->
        <div class="w-28 h-28  flex justify-center items-center bg-blue-400 m-5 useJson" id="useJson">
            json
        </div>
        <div class="w-28 h-28  flex justify-center items-center bg-blue-400 m-5" id="htmlInTooltip">html in tooltip
        </div>
        <div class="w-28 h-28  flex justify-center items-center bg-blue-400 m-5">
            <input type="search" name="" class="w-full" id="search">
        </div>
        <div class="w-28 h-28  flex justify-center items-center bg-blue-400 m-5">123</div>

    </div>

    <script src="../../js/jquery.3.5.1.js"></script>
    <script>
        // const JsonData = {
        //     steps: [{
        //         title: 'Farewell!',
        //         element: document.querySelector('.useJson'),
        //         intro: 'And this is our final step!'
        //     }, {
        //         title: '不同指定元素，直接显示内容',
        //         intro: '<img src="https://images.unsplash.com/photo-1506624183912-c602f4a21ca7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">'
        //     }, {
        //         element: document.querySelector('#htmlInTooltip'),
        //         title: 'html in tooltip',
        //         intro: 'This <b>STEP</b> focuses on an image. <br/> We also used some HTML tags!'
        //     }, {
        //         element: document.querySelector('#search'),
        //         title: '元素交互',
        //         intro: '当一个元素被突出显示时，用户可以与底层元素进行交互。例如，如果按钮获得焦点，用户仍然可以单击该按钮。'
        //     }],
        // }

        // introJs().setOptions({
        //     steps: JsonData.steps,
        //     nextLabel: '下一步',  // 下一个按钮文字  
        //     prevLabel: '上一步',  // 上一个按钮文字
        //     skipLabel: '跳过引导',    // 跳过按钮文字
        //     doneLabel: '立即体验',// 完成按钮文字
        //     hidePrev: true,       // 在第一步中是否隐藏上一个按钮
        //     hideNext: true,       // 在最后一步中是否隐藏下一个按钮
        //     exitOnOverlayClick: false,  // 点击叠加层时是否退出介绍

        //     // tooltipClass: 'customTooltip',  // 自定义样式 
        //     // showProgress: true, // 进度条不能使用
        //     // showButtons: false, // 取消按钮。 
        //     // showBullets: false, // 取消指示点。 
        //     // disableInteraction: true,// 禁用元素交互。 
        // }).start();
        
        /**
         * 动态加载 js、css 标签
         * @param {String} type js|css
         * @param {String} url 文件加载地址
         * @param {Funciton} fn 成功回调
         * @param {Funciton} errFn 失败回调 TODO:
         */
        function loadJsCss(type, url, fn) {
            var elem
            switch (type) {
                case 'js':
                    elem = document.createElement('script')
                    elem.type = 'text/javascript'
                    elem.src = url
                    break
                case 'css':
                    elem = document.createElement('link')
                    elem.rel = 'stylesheet'
                    elem.href = url
                    break
            }
            if (!elem) return
            fn = fn || function () { }

            //IE

            if (elem.readyState) {
                elem.onreadystatechange = function () {
                    if (elem.readyState == 'loaded' || elem.readyState == 'complete') {
                        elem.onreadystatechange = null

                        fn()
                    }
                }
            } else {
                //其他浏览器

                elem.onload = function () {
                    fn()
                }
            }

            document.getElementsByTagName('head')[0].appendChild(elem)
        }


        /**
         * intro 自动配置
         */
        var myintro = {
            gotoEvens: ['onchange', 'onbeforechange', 'onafterchange', 'oncomplete'],	//steps 内有效事件
            /**
             * 初始化
             * @param {Function} fn 初始化完成事件
             */
            init: function (fn) {
                if (!window.introJs) {
                    //未加载 intro 相关文件
                    loadJsCss('js', '/Content/intro.js', function () {
                        myintro.init(fn)
                    })
                    loadJsCss('css', '/Content/introjs.css')
                    return
                }
                //设置默认选项
                window.Intro = introJs().setOptions({
                    nextLabel: '下一步', // 下一个按钮文字
                    prevLabel: '上一步', // 上一个按钮文字
                    skipLabel: '跳过引导', // 跳过按钮文字
                    doneLabel: '立即体验', // 完成按钮文字
                    hidePrev: true, // 在第一步中是否隐藏上一个按钮
                    exitOnOverlayClick: false // 点击叠加层时是否退出介绍
                })
                //跳转事件
                //! onchange, onbeforechange, onafterchange 内若进行重新渲染，需避免 死循环
                myintro.gotoEvens.forEach(function (evenName) {
                    Intro[evenName](function (elem) {
                        var steps = Intro._options.steps
                        if (!steps) return
                        var stepItem = steps[this['_currentStep']]
                        if (!stepItem) return
                        var fun = stepItem[evenName]
                        if (typeof fun === 'string') fun = stepItem[evenName] = eval('(' + fun + ')') //转换 string 函数

                        if (typeof fun !== 'function') return

                        if (fun) {
                            var preStep = this['_currentStep'] - 1 < 0 ? this['_currentStep'] : this['_currentStep'] - 1
                            //evenName(e, elem, preElem)
                            return fun.call(stepItem, this, elem, steps[preStep]['element']) //* 如果 evenName 为 onbeforechange, return false 时将暂停在当前步骤
                        }
                    })
                })

                !fn || fn()
            },
            /**
             * setOptions 后使用此方法替代 原 start()
             */
            start: function () {
                var steps = Intro._options.steps
                if (!steps) return
                steps.forEach(function (item) {
                    if (typeof item.element === 'string') item.element = eval(item.element)
                })

                return Intro.start()
            }
        }


            //操作指引
            ; !myintro || myintro.init(function () {
                //请求获取
                var introSteps = [{
                    element: $('[lay-tips="客户资料管理"]').parent()[0], //实在无法定位时，可定义属性 data-myblock
                    title: '客户资料管理',
                    intro: '客户资料管理相关功能在这 👈',
                    position: 'right',
                    onbeforechange: function (e, elem) { $(elem).addClass('layui-nav-itemed') }
                }, {
                    // element: $('[lay-tips="客户资料管理"]').parent().find('dl:contains("客户资料")')[0],
                    element: $('[lay-tips="客户资料管理"]').parent().find('a[lay-href]:contains("客户资料")')[0],
                    title: '客户资料',
                    intro: '点击查看客户资料 👈',
                    position: 'right',
                }, {
                    element: $('[lay-tips="客户资料管理"]').parent().find('a[lay-href]:contains("客户资料")')[0],
                    title: '新增客户资料',
                    intro: '点击新增客户资料 👈',
                    position: 'right',
                    //转到 iframe 参考：
                    onbeforechange: function (e, elem, preElem) {
                        var _this = this
                        var step = e._currentStep,
                            $a = $(elem).click(),   //打开 iframe
                            href = $a.attr('lay-href'),
                            iframe = $('iframe[src="' + href + '"]')[0] //获取 iframe

                        // iframe 已打开 或 加载中
                        if (iframe) {
                            //加载中
                            iframe.onload = function () {
                                _this.element = iframe.contentWindow.layui.$.find('#create')[0] //重新赋值 定位元素
                                Intro.goToStep(step).start()   //跳转到当前步骤
                            }
                            //已打开
                            if (iframe.contentWindow.layui) {
                                var createElem = iframe.contentWindow.layui.$.find('#create')[0]
                                if (!createElem) return
                                _this.element = createElem
                                Intro.goToStep(step).start()
                                return
                            }

                            return false    //停止渲染
                        }
                    },
                    oncomplete: function (e) {
                        //完成指引
                        $(this.element).click()
                    }
                }]

                Intro.setOptions({
                    steps: introSteps
                })
                myintro.start()
            })
    </script>
</body>

</html>